<template>
  <div class="newpage">
    <iu-header>
      <template #left> </template>
      <template #title>工作日志</template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <Application></Application>
    <div class="newpage_work">
      <tab class="newpage_tab" style="z-index:0" active-color="#456de6" default-color="#fff" custom-bar-width="80%">
        <tab-item @on-item-click="handler(2)" :selected="tag == 2">
          我的
        </tab-item>
        <tab-item @on-item-click="handler(1)" :selected="tag == 1">
          管辖区域
        </tab-item>
      </tab>
      <div class="newpage_work" v-if="tag == 1">
        <div class="showPie" :class="{ show: showPie }">
          <div class="show-title">
            <div class="fixed_dep_box">
              <div class="btn_box">
                <div class="department_select" :class="showTree ? 'statusIndex' : ''" @click="showTreeFn(true)">
                  <p class="department_name">
                    {{ curDepartment.departmentName }}
                  </p>
                  <iconSvg name="downFill" w="23px" height="13px" class="selece_icon" ref="selece_icon"></iconSvg>
                </div>
                <transition name="slide">
                  <div class="dep_box" v-show="showTree">
                    <dep-tree ref="depTree" @changeId="change" @showTreeFn="showTreeFn" @initCurDepartment="initCurDepartment" :initDepartment="curDepartment"></dep-tree>
                  </div>
                </transition>
              </div>
              <div v-if="showTree" @click="showTreeFn(false)" style="position: fixed;top: 0;left:0; width: 100vw;height: 100vh; z-index: 9"></div>
            </div>
          </div>
        </div>
      </div>
      <tab class="newpage_nav_tab" style="z-index:0" active-color="#456de6" default-color="#fff" custom-bar-width="80%">
        <tab-item @on-item-click="eventActive(item)" :selected="statusIndex == item.key" v-for="(item, index) in tabNav" :key="index">
          <div class="tab-item">
            <span>{{ stateNum(item.key) }}</span>
            <span>{{ item.value }}</span>
          </div>
        </tab-item>
      </tab>
      <div class="list-area">
        <template v-if="computedList.length">
          <iu-card class="sheet-card" v-for="(item, index) in computedList" :key="index" @click.native="eventDetail(item.id)">
            <template #title>
              <div class="sheet-card-title">
                {{ item.departmentName }}
              </div>
            </template>
            <template #tip>
              <div class="sheet-card-tip">
                <span>
                  {{ fineNameByValue(workLocationOptions, item.workLocation) }}
                </span>
              </div>
            </template>
            <template #body>
              <div class="sheet-card-info">
                起止时间：<span style="font-size: 14px;">{{ item.beginTime | formatDate }} - {{ item.endTime | formatDate }}</span>
              </div>
              <div class="sheet-card-body">所用工时：{{ item.useTime }}</div>
              <div class="sheet-card-bottom">
                <span>
                  {{ item.createUserName }}
                </span>
                <span>
                  {{ item.createTime | formatDate }}
                </span>
              </div>
            </template>
          </iu-card>
          <div class="newpage_work_more" v-if="showMoreBtn" @click="getMore">
            查看更多
          </div>
        </template>
        <template v-else>
          <div class="not-content">
            <img src="/static/img/zwlr-icon.png" />
            <div class="title">暂无数据</div>
          </div>
        </template>
      </div>
    </div>
    <button class="ewm" @click="eventAdd">
      添 加
    </button>
  </div>
</template>
<script>
import WorkLogsDao from '@/daos/work_logs_dao';

import { Tab, TabItem, Toast, InlineLoading, Datetime } from 'vux';
import iuHeader from '@/components/common/header/index';
import iuCard from '@/components/common/card/index';

import depTree from '@/components/common/tree';
import Application from '@/components/common/application';

export default {
  name: 'earlywrning',
  components: {
    Tab,
    TabItem,
    Toast,
    iuHeader,
    iuCard,
    InlineLoading,
    Datetime,
    Application,
    depTree,
  },
  data() {
    return {
      showPie: false,
      showMore: false,
      showTree: false,
      curDepartment: {
        departmentName: '全企业',
        id: '',
      },
      tabNav: [
        { key: 0, value: '未提交', num: 'state0Num' },
        { key: 1, value: '已提交', num: 'state1Num' },
        { key: 2, value: '作废', num: 'state2Num' },
      ],
      workLocationOptions: [
        { value: 1, label: '采区' },
        { value: 2, label: '破碎(圆锥破碎、中细碎等)' },
        { value: 3, label: '选矿(球磨、干选等)' },
        { value: 9, label: '中控室' },
        { value: 4, label: '尾矿库' },
        { value: 5, label: '配电室' },
        { value: 6, label: '排土场' },
        { value: 7, label: '监控' },
        { value: 8, label: '其他' },
      ],
      stateOptions: ['未提交', '已提交', '作废'],
      chart: null,
      tableData: [],
      workLogsList: [],
      chartList: [],
      checkSecurityRecordData: [],
      showMoreBtn: false,
      certificateAuth: false,
      position: 'middle',
      pageSize: 100,
      pageNum: 1,
      total: 0,
      statusIndex: 0,
      tag: 2,
      store: {
        id: 0,
      },
    };
  },
  created() {
    console.log('created,165');
    this.tag = this.$route.query.tag || 2;
    if (!this.user) {
      this.getUserInfo();
    } else {
      if (this.user.serviceAreaTree.childIdList.length) {
        this.curDepartment = {
          departmentName: '',
          id: this.user.serviceAreaTree.childIdList[0],
        };
      }
    }
  },
  //返回首页的公共方法
  inject: ['backToHomepage', 'backToG6page'],

  activated() {
    if (this.user) {
      this.init();
    }
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    computedList() {
      return this.workLogsList.filter((e) => e.state === this.statusIndex);
    },
  },
  methods: {
    init() {
      this.getList();
    },
    handler(e) {
      this.pageNum = 1;
      this.tag = e;
      this.getList();
    },
    getMore() {
      this.pageNum++;
      this.showMoreBtn = false;
      this.getList();
    },
    back() {
      this.$router.push('/safetycheck');
    },
    stateNum(state) {
      return this.workLogsList.filter((e) => e.state === state).length || 0;
    },
    fineNameByValue(arr, source, sourceKey = 'value', targetKey = 'label') {
      if (!Array.isArray(arr)) {
        return;
      }
      let res = arr.find((e) => e[sourceKey] == source);
      return res && (res[targetKey] || '');
    },
    getUserInfo() {
      this.$http(this.$API.getUserInfo, {}).then((res) => {
        this.$store.commit('saveUser', res);
        if (res.serviceAreaTree.childIdList.length) {
          this.curDepartment = {
            departmentName: '',
            id: res.serviceAreaTree.childIdList[0],
          };
        }
        this.init();
      });
    },
    eventAdd() {
      this.$router.push({
        name: 'workLogsAdd',
      });
    },
    eventDetail(id) {
      this.$router.push({
        name: 'workLogsAdd',
        query: {
          id,
        },
      });
    },
    eventActive(item) {
      this.pageNum = 1;
      this.showMoreBtn = false;
      this.statusIndex = item.key;
      this.getList();
    },
    getList() {
      let params = {
        departmentId: this.tag == 2 ? '' : this.curDepartment.id,
        createUser: this.tag == 2 ? this.user.id : '',
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        // status: this.statusIndex,
        beginTime: '',
        deviceId: '',
        endTime: '',
        state: '',
        workType: '',
      };

      WorkLogsDao.getWorkLog(params, (res) => {
        this.workLogsList.splice(0);
        if (res) {
          this.workLogsList = res.content;
          this.showMoreBtn = res.totalPages && this.pageNum < res.totalPages;
        }
      });
    },
    handlePlanTypeArr(type) {
      let arr = [];
      arr = type.split(',').map((e) => this.planTypeArr[e - 1]);
      return arr;
    },
    eventCheckDeteil(item, tag) {
      let { id } = item;
      if (tag === 'open') {
        if (!item.showStandard) {
          this.$set(item, 'showStandard', true);
          this.tableData.forEach((e) => {
            this.$set(e, 'showStandard', false);
          });
          item.showStandard = true;
          this.getCheckStandardItemRecordList(item);
        } else {
          this.$set(item, 'showStandard', false);
        }
      } else {
        this.$router.push({
          name: 'safetyCheckResultList',
          query: {
            id,
            status: this.statusIndex,
          },
        });
      }
    },
    eventClickStandardItem(item, checkItem) {
      this.$router.push({
        name: 'safetyCheckResultList',
        query: {
          id: item.id,
          checkItemId: checkItem.id,
          status: this.statusIndex,
          isAccomplish: checkItem.isAccomplish,
          showType: 'detail',
        },
      });
    },
    getCheckStandardItemRecordList(item, status) {
      let params = {
        checkSecurityRecordId: item.id,
        isAccomplish: '', // 状态  0未检查 1已完成
      };
      SafetyManageDao.getCheckStandardItemRecordList(params, (res) => {
        if (res && res.length) {
          this.$set(item, 'checkStandardList', res);
          // this.checkStandardList = res;
        }
      });
    },
    getCertificateMore() {
      this.pageNum++;
      this.getCertificateList();
    },
    getCheckSecurityRecordDepList() {
      let params = {
        departmentId: this.curDepartment.id,
        // orgId: this.user.org.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        status: this.statusIndex,
      };
      SafetyManageDao.getCheckSecurityRecordDepList(params, (res) => {
        if (this.pageNum === 1) {
          this.tableData.splice(0);
        }
        if (res.content && res.content.length) {
          res.content.forEach((e) => {
            e.showStandard = false;
          });
          this.tableData.splice((this.pageNum - 1) * this.pageSize, this.pageSize, ...res.content);
          if (this.tableData[0]) {
            this.tableData[0].showStandard = true;
            this.getCheckStandardItemRecordList(this.tableData[0]);
          }
        }
        this.showMoreBtn = res.totalPages && this.pageNum < res.totalPages;
      });
    },
    getcheckSecurityRecordDepTabNum() {
      let params = {
        departmentId: this.curDepartment.id,
        // orgId: this.user.org.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        status: this.statusIndex,
      };
      SafetyManageDao.getcheckSecurityRecordDepTabNum(params, (res) => {
        if (res) {
          Object.assign(this.tabNum, res);
        }
      });
    },
    getCheckSecurityRecordUserList() {
      let params = {
        departmentId: this.curDepartment.id,
        // orgId: this.user.org.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        status: this.statusIndex,
      };
      SafetyManageDao.getCheckSecurityRecordUserList(params, (res) => {
        if (this.pageNum === 1) {
          this.tableData.splice(0);
        }
        if (res.content && res.content.length) {
          res.content.forEach((e) => {
            e.showStandard = false;
          });
          this.tableData.splice((this.pageNum - 1) * this.pageSize, this.pageSize, ...res.content);
          if (this.tableData[0]) {
            this.tableData[0].showStandard = true;
            this.getCheckStandardItemRecordList(this.tableData[0]);
          }
        }
        this.showMoreBtn = res.totalPages && this.pageNum < res.totalPages;
      });
    },
    getcheckSecurityRecordUserTabNum() {
      let params = {
        departmentId: this.curDepartment.id,
        // orgId: this.user.org.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        status: this.statusIndex,
      };
      SafetyManageDao.getcheckSecurityRecordUserTabNum(params, (res) => {
        if (res) {
          Object.assign(this.tabNum, res);
        }
      });
    },
    certificateDetail(id) {
      this.store.id = id;
      this.$router.push({
        name: 'certificate_manage',
        query: {
          id: id,
        },
      });
    },
    showTreeFn(status) {
      if (status) {
        this.$refs.selece_icon.$el.style.transform = 'rotate(-180deg)';
      } else {
        this.$refs.selece_icon.$el.style.transform = 'rotate(0deg)';
      }
      this.showTree = status;
    },
    initCurDepartment(id, departmentName) {
      console.log(id, departmentName);
      this.curDepartment = {
        departmentName,
        id,
      };
    },
    change(id, departmentName) {
      this.curDepartment = {
        departmentName,
        id,
      };
      this.getList();
    },
    drawLine(data) {
      if (!this.chart) {
        let option = {
          color: ['#F94B48', '#F9D64A', '#54CA75', '#456DE5'],
          grid: {
            containLabel: true,
            top: '8%',
            bottom: '18%',
            left: '4%',
            right: '4%',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              lineStyle: {
                color: '#979797',
              },
            },
            textStyle: {
              align: 'left',
            },
          },
          legend: { bottom: '4%', textStyle: { color: '#fff' } },
          textStyle: {
            color: '#959595',
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#979797',
              },
            },
            axisTick: {
              show: false,
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: '#979797',
                type: 'dotted',
              },
            },
          },
          series: [
            {
              type: 'bar',
              itemStyle: { color: '#456DE5' },
            },
            {
              type: 'bar',
              itemStyle: { color: '#DC9610' },
            },
            // {
            //   type: "bar",
            //   itemStyle: { color: "#DD6031" }
            // }
          ],
        };

        this.chart = this.$echarts.init(this.$refs.chart);
        this.chart.setOption(option);
      }
      let source = this.formatRecordDataDataset(data);
      this.chart.setOption({
        dataset: {
          source,
        },
      });
      let option = this.chart.getOption();
      if (!source.length) {
        option.graphic = [
          {
            type: 'text',
            left: 'center',
            top: '40%',
            style: {
              text: '',
              fill: '#fff',
              fontSize: 18,
            },
          },
        ];
        this.chart.setOption(option, true);
      } else {
        option.graphic = [];
        this.chart.setOption(option, true);
      }
    },
    formatRecordDataDataset(data) {
      let dataset = [],
        xAxis = [],
        yAxis = [];
      if (data && data.length) {
        xAxis.push('product', '已执行', '已逾期');
        data.forEach((e, i) => {
          yAxis.push([e.name, +e.achieveNum, +e.overdueNum]);
          // e.dataList.forEach((ele, index) => {
          // yAxis[i].push(ele.statusCount);
          // });
        });
        dataset.push(xAxis, ...yAxis);
        return dataset;
      } else {
        return [];
      }
    },
  },
};
</script>
<style lang="less">
.newpage_tab {
  .vux-tab {
    height: 45px !important;
    background: #1b1c32;
    .vux-tab-item {
      background: none;
      color: #fff;
    }
  }
}
.newpage_nav_tab {
  &.vux-tab-wrap {
    padding-top: 50px !important;
  }
  .vux-tab-container {
    height: 50px !important;
  }
  .vux-tab {
    height: 50px !important;
    background: #292a4d !important;
    .vux-tab-item {
      background: none;
      color: #fff;
    }
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    line-height: 1;

    span {
      margin-top: 5px;
      &:nth-child(1) {
        font-size: 16px;
      }
    }
  }
}
.sheet-card {
  .iu-card-title {
    width: 50% !important;
  }
  .iu-card-title-tip {
    width: 50% !important;
  }
}
</style>
<style lang="less" scoped>
.newpage {
  height: 100vh;
  background: #1b1c32;
  overflow-y: scroll;
  .ewm {
    position: fixed;
    right: 16px;
    bottom: 60px;
    width: 48px;
    height: 48px;
    outline: none;
    border: none;
    border-radius: 50%;
    background: rgba(69, 109, 230, 0.4);
    color: #fff;
    font-size: 12px;
    line-height: 46px;
    text-align: center;
    user-select: none;
    z-index: 9999;
    padding: 0;
    &:active {
      background: rgba(69, 109, 230, 0.6);
    }
  }
  .sheet-card {
    margin-bottom: 16px;
    .sheet-card-title {
      color: #fff;
      &.warning {
        color: #ffb62c;
      }
      &.error {
        color: #ff2c2c;
      }
    }
    .sheet-card-tip {
      display: flex;
      justify-content: flex-end;
      margin-right: -8px;
      span {
        padding: 2px 6px 4px;
        text-align: right;
        background-color: #292a4d;
        border-radius: 5px;
      }
    }
    .sheet-card-info {
      display: flex;
      align-items: center;
      margin: 4px 0 12px;
      .sheet-card-tag {
        margin-left: 12px;
        border: 1px solid #456de6;
        padding: 0 4px 1px;
        font-size: 12px;
        border-radius: 4px;
        color: #456de6;
      }
    }
    .sheet-card-body {
      margin: 4px 0 12px;
    }
    .sheet-card-department {
      margin: 8px 0;
      color: rgba(255, 255, 255, 0.8);
    }
    .sheet-card-bottom {
      display: flex;
      justify-content: space-between;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      color: rgba(255, 255, 255, 0.6);
    }
  }
}
.list-area {
  padding: 8px;
  .check-list {
    margin-bottom: 16px;
  }
}
.produce-tab {
  display: flex;
  height: 44px;
  width: 100%;
  align-items: center;
  background: #22233f;
  .produce-tab-item {
    position: relative;
    width: 50%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    &.active {
      color: #456de6;
      background-color: initial;
      .line {
        position: absolute;
        left: 50%;
        bottom: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 50%;
        height: 3px;
        background: #456de6;
      }
    }
  }
}
.newpage_work_more {
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  color: #456de6;
}

.newpage_work_bottom {
  padding: 16px;
}
.newpage_work {
  .fixed_dep_box {
    // padding: 5px 0;
    background: #22233f;
    width: 80%;
    .btn_box {
      display: flex;
      // padding: 0 16px;
      justify-content: space-between;
      position: relative;
      height: 28px;
      .department_select {
        position: relative;
        width: 100%;
        border-radius: 2px;
        background: #292a4d;
        transition: background 0.3s ease-in-out;
        &.statusIndex {
          background: #383a69;
        }
        .department_name {
          padding: 5px 9px;
          padding-right: 30px;
          color: #fff;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align-last: left;
        }
        .selece_icon {
          position: absolute;
          top: 50%;
          right: 8px;
          margin-top: -6px;
          transition: transform 0.3s ease-in-out;
          transform-origin: 50% 50%;
        }
      }
      .dep_box {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: -255px;
        padding-right: 16px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 4px;
        height: 250px;
        overflow-y: scroll;
        z-index: 9999999;
        -webkit-overflow-scrolling: touch;
      }
      .toggle {
        outline: none;
        border: none;
        background: inherit;
        font-size: 14px;
        color: #fff;
        .btn_icon {
          margin-top: -5px;
        }
      }
    }
  }
  &.show-more-open {
    overflow: hidden;
  }
  // position: fixed;
  .showPie {
    margin: 0 auto;
    padding: 8px 0;
    width: 100%;
    background-color: #18182c;
    position: relative;
    &.show {
      height: auto;
    }

    .chart_empty {
      position: absolute;
      display: block;
      width: 84px;
      bottom: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      img {
        width: 100%;
      }
      p {
        text-align: center;
        color: #9ec6fb;
        font-size: 13px;
      }
    }
    // div {
    // background-color: unset !important;
    // }
    .show-title {
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      padding: 0 16px;
      .show-btn {
        color: #fff;
        font-size: 12px;
        display: flex;
        align-items: center;
      }
    }
  }
  .tab-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 12px 0;
    .tab-nav-item {
      flex: 1;
      color: #456de6;
      font-size: 14px;
      padding: 6px 0 8px;
      margin: 0 4px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #456de6;
      display: flex;
      flex-direction: column;
      &.overdue {
        color: #f5a623;
        border: 1px solid #f5a623;
      }
      &.statusIndex {
        color: #fff;
        background: #456de6;
        border: 1px solid #456de6;
        &.overdue {
          color: #fff;
          background: #f5a623;
          border: 1px solid #f5a623;
        }
      }
    }
  }
  .check-list {
    padding: 8px;
    height: auto;
    min-height: 80px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    background-color: #292a4d;
    border-radius: 4px;
    .ellipsis {
      display: inherit !important;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .item-title {
      font-size: 17px;
      color: #fff;
      // overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      &.overdue {
        justify-content: flex-start;
      }
      .tag {
        color: #4266d6;
        float: right;
        font-size: 15px;

        &.yollow {
          color: #dd9710;
        }
        &.redy {
          color: #f56c6c;
        }
        &.green {
          color: #67c23a;
        }
      }
      .title-label {
        margin-left: -8px;
        border-radius: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        font-size: 14px;
        padding: 0 12px 1px 8px;
        background-color: #456de6;
        margin-right: 8px;
      }
      .title-text {
        margin-right: 8px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .title-check {
        font-size: 14px;
      }
      .title-tip {
        width: 100%;
        font-size: 14px;
        padding: 1px 4px 2px;
        border-radius: 4px;
        margin-left: 4px;
        font-size: 13px;
        background-color: #456de6;
        &.status {
          color: #456de6;
        }
        &.status1,
        &.status4 {
          color: #4fa8e7;
        }
        &.status3 {
          color: #456de6;
        }
        &.status5 {
          color: #dd9710;
        }
        &.status9,
        &.status7 {
          color: #dd9710;
        }
        // &.green {
        //   color: #67c23a;
        // }
        // &.gray {
        //   color: #999;
        // }
      }
    }
    .item-body {
      // color: #456de6;
      font-size: 16px;
      padding: 8px 0;
      display: flex;
      justify-content: space-between;
      .body-tag {
        font-size: 14px;
        display: flex;
        align-items: center;
      }
      .item-show {
        color: #fff;
        font-size: 14px;
        width: 52px;
        padding: 1px 0;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 80px;
        border: 1px solid #456de6;
      }
    }
    .item-body-other {
      color: rgba(255, 255, 255, 0.6);
    }
    .item-bottom {
      padding-top: 6px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .child-body-state {
        margin-left: 8px;
        padding: 0 2px 1px;
        color: #456de6;
        border: 1px solid #456de6;
        border-radius: 2px;
      }
      .handle-btn {
        margin-left: 8px;
        flex: none;
      }
      .btn {
        color: #fff;
        font-size: 14px;
        background-color: #456de6;
        padding: 2px 11px 3px;
        border-radius: 12px;
      }
    }
    .item-child {
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      padding-bottom: 6px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
      .child-title {
        color: #fff;
        // overflow: hidden;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: keep-all;
        display: flex;
        align-items: center;
        // justify-content: space-between;

        .child-label {
          font-size: 14px;
          margin-right: 8px;
          padding: 0 6px 1px;
          color: #fff;
          border: 1px solid #456de6;
          border-radius: 2px;
        }
        .child-tip {
          width: 100%;
          margin-right: 8px;
          font-size: 14px;
          &.status {
            color: #dd9710;
          }
          &.status {
            color: #456de6;
          }
          &.status1,
          &.status4 {
            color: #4fa8e7;
          }
          &.status3 {
            color: #456de6;
          }
          &.status5 {
            color: #dd9710;
          }
          &.status9,
          &.status7 {
            color: #dd9710;
          }
        }
      }

      .child-body {
        font-size: 14px;
        margin: 4px 0;
        display: flex;
        flex-direction: column;
        // align-items: center;
        // justify-content: space-between;
        .child-list {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 6px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
          .list-text {
            width: 100%;
            padding: 0 8px;
          }
        }
        .detail-btn {
          width: 100%;
          // padding: 6px;
          // margin-top: 16px;
          .btn {
            width: 100px;
            margin: 12px auto 0;
            padding: 6px 0;
            font-size: 14px;
            color: #ffffff;
            text-align: center;
            background: #3967dc;
            border-radius: 5px;
          }
        }
        .child-body-state {
          margin-left: 8px;
          padding: 0 2px 1px;
          color: #456de6;
          border: 1px solid #456de6;
          border-radius: 2px;
        }
        &.handle {
          justify-content: space-between;
          color: #fff;
        }
      }
      .handle-btn {
        margin-left: 8px;
        flex: none;
      }
      .btn {
        color: #fff;
        font-size: 14px;
        background-color: #456de6;
        padding: 2px 11px 3px;
        border-radius: 12px;
      }
    }
    .their {
      font-size: 14px;
      color: #fff;
    }
    .more  {
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .time {
      font-size: 14px;
      color: rgba(69, 109, 230, 1);
    }
    .newpage_work_more {
      height: 40px;
      font-size: 12px;
      line-height: 40px;
      text-align: center;
      color: #456de6;
    }
  }
}
.not-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  img {
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  .title {
    margin: 8px auto;
    width: 126px;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(158, 198, 251, 1);
    line-height: 20px;
    text-align: center;
  }
}
.newpage_title {
  height: 44px;
  background: #18182c;
  padding: 0 15px;
  display: flex;
  span {
    display: inline-block;
    color: #ffff;
    font-size: 15px;
    vertical-align: middle;
  }
  .nav-left {
    .company-logo {
      height: 100%;
      width: 48px;
    }
  }
  .nav-center {
    flex: 1;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    color: #fff;
  }
  .nav-right {
    margin-top: 12px;
    width: 36px;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    .paidan {
      margin-top: -8px;
      i {
        font-size: 26px;
      }
    }
  }
  .nav_border_left {
    border-left: 2px solid #fff;
    height: 20px;
  }
}
</style>
